<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!-- Basic page needs -->
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title></title>
		<!-- Mobile specific metas  -->
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- CSS Style -->
		<link rel="stylesheet" href="css/stylesheet.css">
		<link rel="stylesheet" href="css/list-style.css" />
				<!-- jquery js -->
		<script src="js/holder.js"></script>
		<script src="js/jquery.min.js"></script>
		<style type="text/css">
			#itemBase{
				display:none;
			
			}
		
		
		</style>
		
	</head>

	<body class="category-page">
		
		<!-- mobile menu -->

		<div id="page">
			<!-- Header -->
			<header>
				<div class="header-container">
					<div class="header-top">
						<div class="container">

						</div>
					</div>
					<div class="container">
						<div class="row">
							<div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
								<!-- Header Logo -->
								<div class="logo" style="width: 150;height: 90;">
									<h1><a title="缘酒网" href="home"><img class="img-responsive" alt="源酒网" src="images/logo.png"> </a></h1> </div>
								<!-- End Header Logo -->
							</div>
							<div class="col-lg-6 col-md-4 col-sm-4 col-xs-12 jtv-logo-box">
								
							</div>
							<div class="col-lg-3 col-md-4 col-sm-4 col-xs-12 hidden-xs">
								<div class="search-box">
									<form style="margin: 0px;" action="shop_grids" method="POST" id="search_mini_form" name="Categories">
										<input type="text" placeholder="输入关键词" maxlength="70" name="keyWord" id="search" value="${productVo.keyWord}">
										<button type="button" class="search-btn-bg" onclick="search_mini_form.submit();"><span class="glyphicon glyphicon-search"></span></button>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</header>
			<!-- end header -->

			<!-- Navigation -->

			<nav>
				<div class="container">
					<div class="mm-toggle-wrap">
						<div class="mm-toggle"><i class="fa fa-align-justify"></i><span class="mm-label">Menu</span> </div>
					</div>
					<div class="nav-inner">
						<!-- BEGIN NAV -->
						<ul id="nav" class="hidden-xs">
							<li class="drop-menu">
								<a href="home" class="level-top active"><span>首页</span></a>
							</li>
							<c:forEach items="${categoryList}" var="catItem">
								<li class="mega-menu">
								<a class="level-top" href="shop_grids?cid=${catItem.id}"><span>${catItem.cat}</span></a>
								</li>
							</c:forEach>
						</ul>
					</div>
				</div>
			</nav>
			<!-- end nav -->
			<!-- Breadcrumbs -->
			<div class="breadcrumbs">
				<div class="container">
					<div class="row">
						<div class="col-xs-12">
							<div style="float:left;">
								<ul>
									<li class="home">
										<a href="home" title="Go to Home Page">首页</a> <span>/</span> </li>
									<li>
										<a href="shop_grids?cid=${productVo.cid}" title="">${categoryNow.cat}</a><span></span> </li>
								</ul>
							</div>
							<div class="header-filter" style="float:left;color:#333;">
								<c:if test="${ not empty brandInfo}">
									<font style=" border: 1px solid #ccc;margin-left:10px;">品牌：${brandInfo.name}</font>
									<a style=" border: 1px solid #ccc;cursor:pointer;" href="shop_grids?brand=0">X</a>
								</c:if>
								<c:if test="${not empty productVo.startPrice}">
									<font style=" border: 1px solid #ccc;margin-left:10px;">价格：${productVo.startPrice} - ${productVo.endPrice}</font>
									<a style=" border: 1px solid #ccc;cursor:pointer;"  href="shop_grids?endPrice=0">X</a>
								</c:if>
								<c:if test="${not empty productVo.startDegree}">
									<font style=" border: 1px solid #ccc;margin-left:10px;">酒精度：${productVo.startDegree} - ${productVo.endDegree}</font>
									<a style=" border: 1px solid #ccc;cursor:pointer;"  href="shop_grids?endDegree=0">X</a>
								</c:if>
								<c:if test="${not empty productVo.startNet}">
									<font style=" border: 1px solid #ccc;margin-left:10px;">容量：${productVo.startNet} - ${productVo.endNet}</font>
									<a style=" border: 1px solid #ccc;cursor:pointer;"  href="shop_grids?endNet=0">X</a>
								</c:if>
								<c:if test="${not empty productVo.startNet or not empty brandInfo or not empty productVo.startPrice or not empty productVo.startDegree}">
									<a style="margin-left:10px;cursor:pointer;"  href="shop_grids?clearAll=1">清除选项</a>
								</c:if>
								
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Breadcrumbs End -->

			<!-- Main Container -->
			<section class="main-container col2-left-layout">
				<div class="container">
					<div class="row">
						<div class="col-sm-12">
							<div class="list-group" style="margin-left: -38px;">
								<ul>
									<c:if test="${empty brandInfo}">
										<li class="list-group-item ">
												<span class="my-type" style="position:absolute;left:15px;top:10px;">品&emsp;牌</span>
												<div class="brandliststyle">
													<c:forEach items="${brandList}" var="brandItem">
														<div class="brand-item"  style="float:left;position:relative;"><a href="shop_grids?brand=${brandItem.id}">${brandItem.name}</a></div>
													</c:forEach>
												</div>
											<button id="stateButton" style="float: right;background-color: #ffffff;border: 1px solid #DDDDDD;width: 40px;">展开</button>
										</li>
									</c:if>
									<c:if test="${empty productVo.startPrice}">
										<li class="list-group-item" style="position:relative;">
											<span class="my-type">价&emsp;格</span>
											<a href="shop_grids?startPrice=0&endPrice=99"  style="margin-left: 10px;">0-99  </a>
											<a href="shop_grids?startPrice=100&endPrice=199">100-199  </a>
											<a href="shop_grids?startPrice=200&endPrice=299">200-299  </a>
											<a href="shop_grids?startPrice=300&endPrice=499">300-499  </a>
											<a href="shop_grids?startPrice=500">500- </a>
										</li>
									</c:if>
									
									<!-- 白酒显示酒精度选项 -->
									<c:if test="${categoryNow.id == '1' and empty productVo.startDegree}">
									<li class="list-group-item">
										<span class="my-type">酒精度</span>
										<a href="shop_grids?startDegree=0&endDegree=9">0-9  </a>
										<a href="shop_grids?startDegree=10&endDegree=19">10-19  </a>
										<a href="shop_grids?startDegree=20&endDegree=29">20-29  </a>
										<a href="shop_grids?startDegree=30&endDegree=39">30-39  </a>
										<a href="shop_grids?startDegree=40&endDegree=49">40-49  </a>
										<a href="shop_grids?startDegree=50">50-  </a>
									</li>
									</c:if>
									<c:if test="${empty productVo.startNet}">
										<li class="list-group-item">
											<span class="my-type">容&emsp;量</span>
											<a href="shop_grids?startNet=0&endNet=49">0-49  </a>
											<a href="shop_grids?startNet=50&endNet=99">50-99  </a>
											<a href="shop_grids?startNet=100&endNet=199">100-199  </a>
											<a href="shop_grids?startNet=200&endNet=499">200-499  </a>
											<a href="shop_grids?startNet=500">500-  </a>
										</li>
									</c:if>
								</ul>
							</div>
							<article class="col-main">
								
								<div class="toolbar">
									<div class="row" >
										<div class="col-sm-2 text-center sort-by hidden-sm" style="border: 1px solid #DDDDDD;margin-left:15px;width: 80px;">
											<a class="control-label" for="input-sort" style="color: #000000;" href="shop_grids?orderBy=0">综合排序</a>
										</div>
										<div class="col-sm-2 text-center sort-by hidden-sm" style="border: 1px solid #DDDDDD;width: 80px;">
										<c:choose>
											<c:when test="${productVo.orderBy == null or productVo.order == 'desc'}">
												<a class="control-label" for="input-sort" style="color: #000000;" href="shop_grids?orderBy=valuesell&order=asc">价格</a>
											</c:when>
											<c:otherwise>
												<a class="control-label" for="input-sort" style="color: #000000;" href="shop_grids?orderBy=valuesell&order=desc">价格</a>
											</c:otherwise>
										</c:choose>
											
										</div>
										<div class="col-sm-2 text-center sort-by hidden-sm" style="border: 1px solid #DDDDDD;width: 80px;">
										<c:choose>
											<c:when test="${productVo.orderBy == null or productVo.order == 'desc'}">
												<a class="control-label" for="input-sort" style="color: #000000;" href="shop_grids?orderBy=net&order=asc">容量</a>
											</c:when>
											<c:otherwise>
												<a class="control-label" for="input-sort" style="color: #000000;" href="shop_grids?orderBy=net&order=desc">容量</a>
											</c:otherwise>
										</c:choose>
										</div>
										<!-- 白酒显示酒精度选项 -->
									<c:if test="${categoryNow.id == '1'}">
										<div class="col-sm-2 text-center sort-by hidden-sm" style="border: 1px solid #DDDDDD;width: 80px;">
										<c:choose>
											<c:when test="${productVo.orderBy == null or productVo.order == 'desc'}">
												<a class="control-label" for="input-sort" style="color: #000000;" href="shop_grids?orderBy=degree&order=asc">酒精度</a>
											</c:when>
											<c:otherwise>
												<a class="control-label" for="input-sort" style="color: #000000;" href="shop_grids?orderBy=degree&order=desc">酒精度</a>
											</c:otherwise>
										</c:choose>
										</div>
									</c:if>
										
									</div>
								</div>
								<div class="category-products">
									<ul class="products-grid">
										<li class="item col-lg-3 col-md-3 col-sm-3 col-xs-6" id="itemBase">
											<div class="item-inner">
												<div class="item-img">
													<div class="item-img-info">
														<a class="product-image" title="Product Title Here" href="single_product"> <img alt="图片暂时无法显示" src="images/products/img03.jpg" style="width: 200px;height: 200px;"> </a>
													</div>
												</div>
												<div class="item-info">
													<div class="info-inner">
														<div class="item-title">
															<h6> <a title="Product Title Here" href="single_product">[酒仙] 这是一个标题 </a></h6> </div>
														<div class="item-content">
															
															<div class="item-price">
																<div class="price-box">
																	<p class="special-price"> <span class="price-label">Special Price</span> <span class="price"> $156.00 </span> </p>
																	<p class="old-price"> <span class="price-label">Regular Price:</span> <span class="price"></span> </p>
																</div>
															</div>
															<div class="item-shop">店铺名称</div>
														</div>
													</div>
												</div>
											</div>
										</li>
									
									</ul>
								</div>
								<div class="toolbar">
									<div class="row">
										<div class="col-sm-6 text-left">
											<ul class="pagination" id="paginator">
											</ul>
										</div>
										
									</div>
								</div>
							</article>
							<!--	///*///======    End article  ========= //*/// -->
						</div>
					</div>
				</div>
			</section>
			<!-- Main Container End -->
			
			<!-- Footer -->
			<!-- Footer -->
			<footer style="height:50px;padding-top:10px;text-align:center;">
				<div class="footer-word">
					©缘酒网							
				</div>
			</footer>
		</div>

		<!-- End Footer -->
		<!-- bootstrap js -->
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<!-- jquery-ui js -->
		<script type="text/javascript" src="js/jquery-ui.js"></script>
		<!-- owl.carousel.min js -->
		<script type="text/javascript" src="js/owl.carousel.min.js"></script>
		<!-- jtv-jtv-mobile-menu js -->
		<script type="text/javascript" src="js/jtv-mobile-menu.js"></script>
		<!-- countdown js -->
		<script type="text/javascript" src="js/countdown.js"></script>

		<script type="text/javascript" src="js/categorylist.js"></script>
		<!-- 分页插件 -->
		<script type="text/javascript" src="js/jqpaginator.min.js"></script>
		<script type="text/javascript">
		var totalPage=${totalCount};
			$.jqPaginator('#paginator', {  
		        totalPages:totalPage,  
		        visiblePages: 5,  
		        currentPage: 1,  
		        first: '<li class="prev"><a href="javascript:;">首页</a></li>',  
		        prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',  
		        next: '<li class="next"><a href="javascript:;">下一页</a></li>',  
		        last: '<li class="prev"><a href="javascript:;">末页</a></li>',  
		        page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',  
		        onPageChange: function (pageNum, type) {  
					$.ajax({
						url:"goodsList?keyWord=${productVo.keyWord}",
						type: "post",
						data: {currentPage:pageNum},
						success: function(result){
							//清除原内容
							$("#itemBase").siblings("li").remove();
							//获取内容
							var pList = result.list;
							$.each($(pList),function(index, element){
								var tempNode = $("#itemBase").clone();
								//可显示
								tempNode.removeAttr("id");
								tempNode.find("img").attr("src",element.pic)
								var titleStr="";
								if(element.webCode == '1'){
									titleStr +="[酒仙]";
								}else{
									titleStr += "[1919]";
								}
								titleStr +=element.title;
								tempNode.find(".item-title a").text(titleStr);
								tempNode.find(".item-title a").attr("title",titleStr);
								tempNode.find("a.product-image").attr("title",titleStr);
								tempNode.find(".item-price p.special-price .price").text("￥"+element.valueSell);
								if(element.valueSuggest != null && element.valueSuggest != '' && element.valueSell != element.valueSuggest){
									tempNode.find(".item-price p.old-price .price").text("￥"+element.valueSuggest);
								}
								tempNode.find("a").attr("href","single_product?id="+element.id);
								tempNode.find(".item-shop").text(element.shopName);
								$("ul.products-grid").append(tempNode);
							});
							
						}
					});
		        }  
		    });  
		</script>
		<!-- main js -->
<!-- 		<script type="text/javascript" src="js/main.js"></script> -->
<!--         <script type="text/javascript" src="js/more.js"></script> -->
		<a href="shop_grid" id="toTop" style="display: none;"><span id="toTopHover"></span></a>
	</body>

</html>